<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../dist/avalon.js"></script>
</head>
<body>
<blockquote>
    <div ms-controller="tree">
        <ul ms-for="el in @tree">{{el.text}}
            <span ms-click='@toggle($event,el)' ms-text="@trigger(el)"></span>
            <div ms-html="@tmpl" ms-visible="el.subtree.length " ></div>
        </ul>
    </div>
    <script>

        
        avalon.define({
            $id: "tree",
            trigger: function (el) {
                if (el.subtree && el.subtree.length) {
                    return el.open ? '[+]' : '[-]'
                } else {
                    return ''
                }
            },
            toggle: function (event, elem) {
                var el = event.target
                elem.open = el.open = !el.open
                var tree = el.nextElementSibling
                tree.style.display = el.open ? '' : 'none'
            },
            tree: [
                {text: "aaa", open: 1, subtree: [
                    {text: 1111, open: 1, subtree: []},
                    {text: 2222, open: 1, subtree: [
                        {text: 777, open: 1, subtree: []}
                    ]},
                    {text: 3333, open: 1, subtree: [
                        {text: 8888, open: 1, subtree: []},
                        {text: 999, open: 1, subtree: []}
                    ]}
                ]},
                {text: "bbb", open: 1, subtree: [
                    {text: 4444, open: 1, subtree: []},
                    {text: 5555, open: 1, subtree: []},
                    {text: 6666, open: 1, subtree: []}
                ]},
                {text: "ccc", open: 1, subtree: []},
                {text: "ddd", open: 1, subtree: []},
                {text: "eee", open: 1, subtree: [
                    {text: 1234, open: 1, subtree: []}
                ]},
                {text: "fff", open: 1, subtree: []}
            ],
            tmpl: "<ul ms-for='el in el.subtree'><li>{{el.text}}<span ms-click='@toggle($event,el)' ms-text='@trigger(el)'></span><div ms-html='@tmpl' ms-visible='el.subtree.length '>xxx</div></li></ul>"

        })
    </script>
</blockquote>
</body>
</html>